
window.onload=function(){
    //导航栏下拉效果
    var dropdown = document.getElementById('dropdown');
    var dropdownLi = dropdown.getElementsByTagName('li');
    for(var i=0;i<dropdownLi.length;i++){
        if(i == 1){
            continue;
        }
        dropdownLi[i].onmouseover=function(){
            this.classList.add("show");
        }
        dropdownLi[i].onmouseout=function(){
            this.classList.remove("show");
        }
    }
    //主体侧边栏的显示隐藏
    var dropright = document.getElementById('dropright');
    var droprightLi = dropright.getElementsByTagName('li');
    for(var i=0;i<droprightLi.length;i++){
        droprightLi[i].onmouseover=function(){
            // console.log(1);
            this.classList.add("show");
        }
        droprightLi[i].onmouseout=function(){
            this.classList.remove("show");
        }
    }
    //轮播图效果的开发
    var carousel = document.getElementById('carousel');
    var left = document.getElementById('left');
    var right = document.getElementById('right');
    var image = document.getElementById('image');
    var numlist = document.getElementById('number').getElementsByTagName('li');
    var link = document.getElementById('links');
    //初始化
    var www=["https://waimai.meituan.com","http://www.jd.com/","https://www.maoyan.com/","http://www.bilibili.com/","http://www.taobao.com","http://www.tianmao.com"];
    links.href = 'https://waimai.meituan.com';
    image.src="./images/ad01.jpg";
    var add = 1;
    numlist[0].style.backgroundColor = '#fff';
    //鼠标移入移出轮播区域 显示和隐藏左右箭头
    carousel.onmouseover=function(){
        left.style.display = 'block';
        right.style.display = 'block';
        clearInterval(timer);
    }
    carousel.onmouseout=function(){
        left.style.display = 'none';
        right.style.display = 'none';
        lunbo();
    }
    //点击左右箭头切换图片
    right.onclick=function(){
        add = add+1;
        if(add>6){
            add=1;
        }
        image.src='./images/ad0'+add+'.jpg';
        //超链接的网址
        links.href = www[add-1];
        //获取li的下标匹配
        var x = add-1;
        for(var i=0;i<numlist.length;i++){
            numlist[i].style.backgroundColor = '#3e3e3e';
            if(x == i){
                numlist[i].style.backgroundColor = '#fff';
            }
        }
    }
    left.onclick=function(){
        add = add-1;
        if(add<1){
            add=6;
        }
        image.src='./images/ad0'+add+'.jpg';
        //超链接的网址
        links.href = www[add-1];
        //获取li的下标匹配
        var x = add-1;
        for(var i=0;i<numlist.length;i++){
            numlist[i].style.backgroundColor = '#3e3e3e';
            if(x == i){
                numlist[i].style.backgroundColor = '#fff';
            }
        }
    }
    //鼠标划过li的时候切换图片
    for(var i=0;i<numlist.length;i++){
        numlist[i].onmouseover = function(){
            // console.log(numlist[i]);
            //使用this代替我们现在的li
            var add = this.innerHTML;
            image.src='./images/ad0'+add+'.jpg';
            //超链接的网址
            links.href = www[add-1];
            //获取li的下标匹配
            var x = add-1;
            for(var i=0;i<numlist.length;i++){
                numlist[i].style.backgroundColor = '#3e3e3e';
                if(x == i){
                    numlist[i].style.backgroundColor = '#fff';
                }
            }
        }
    }
    //定时轮播调用
    function lunbo(){
        //如果函数内 没有使用var声明的变量 会变成全局变量
        timer = setInterval(function(){
            add = add+1;
            if(add>6){
                add=1;
            }
            image.src='./images/ad0'+add+'.jpg';
            //超链接的网址
            links.href = www[add-1];
            //获取li的下标匹配
            var x = add-1;
            for(var i=0;i<numlist.length;i++){
                numlist[i].style.backgroundColor = '#3e3e3e';
                if(x == i){
                    numlist[i].style.backgroundColor = '#fff';
                }
            }
        },3000)
    }
    lunbo();
    // console.log(timer);
    
    //猫眼电影鼠标移动切换的效果
    var maoyanContainer = document.getElementsByClassName('maoyan-container')[0];
    var maoyanNavItem = document.getElementsByClassName('nav-item');
    var scenes = document.getElementsByClassName('scenes')[0];

    //ES6最新的变量声明方法 他在循环中 会有非常好的作用 不会累加
    for(let i=0;i<maoyanNavItem.length;i++){
        maoyanNavItem[i].onmouseover  = function (){
            // console.log(1);
            for(var j =0;j<maoyanNavItem.length;j++){
                maoyanNavItem[j].children[0].style.display = 'none';
                scenes.children[j].style.display = 'none';
            }
            this.children[0].style.display = 'block';
            //for循环到头的话 找不到了对应的节点
            // console.log(i);
            scenes.children[i].style.display = 'block';
        }
    }
    //点击进行左右滑动的特效
    var slider = document.getElementsByClassName('slider');
    var sliderContent = document.getElementsByClassName('slider-content');
    var btnPre = document.getElementsByClassName('btn-pre');
    var btnNext = document.getElementsByClassName('btn-next');

    //初始化
    var x = 0;
    //放在一个循环中
    for(let i=0;i<2;i++){
        slider[i].onmouseover = function(){
            btnPre[i].style.display = 'block';
            btnNext[i].style.display = 'block';
        }
        slider[i].onmouseout = function(){
            btnPre[i].style.display = 'none';
            btnNext[i].style.display = 'none';
        }
        btnNext[i].onclick = function(){
            x = x - 1165
            if(x < -1165){
                x = -1165;
            }
            sliderContent[i].style.left = x + 'px';
        }
        btnPre[i].onclick = function(){
            x = x + 1165
            if(x > 0){
                x = 0;
            }
            sliderContent[i].style.left = x + 'px';
        }
    }
    //推荐民宿的显示和隐藏
    var hotelTab = document.getElementById('hotel-tab');
    var hotelTabLi = hotelTab.getElementsByTagName('li');
    var container = document.getElementById('container');
    var containerDiv = container.getElementsByClassName('tablist');

    for(var i=0;i<hotelTabLi.length;i++){
        hotelTabLi[i].index = i;
        hotelTabLi[i].onmouseover=function(){
            for(var j=0;j<hotelTabLi.length;j++){
                hotelTabLi[j].className = '';
                containerDiv[j].style.display = 'none';
            }
            this.className = 'act';
            containerDiv[this.index].style.display = 'block';
        }
        for(var m=1;m<hotelTabLi.length;m++){
            hotelTabLi[m].className = '';
            containerDiv[m].style.display="none";
        }
    }
}